<template>
  <div class="login">
    <span class="title-top">
      千锋外卖
    </span>
    <van-tabs v-model="active" title-active-color='#02a774'>
      <van-tab title="短信登录">
        <van-form @submit.prevent="login">
          <van-field
            v-model="phone"
            name="用户名"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请输入手机号' }]"
          />
          <van-field
            v-model="code"
            type="text"
            name="密码"
            label="验证码"
            placeholder="请输入验证码"
            show-error="false"
            :rules="[{ required: true, message: '请填写验证码' }]"
          />
          <div style="margin: 16px;">
            <van-button
            class="btn-code"
            round block type="info"
            @click.stop="getCode"
            color="rgba(18,162,125,0.48)"
            >发送验证码</van-button>
            <van-button
            round block type="info"
            native-type="submit"
            @click="sub"
            color="rgba(18,162,125,0.48)"
            >登录</van-button>
          </div>
        </van-form>
        <section class="login_hint">
          温馨提示：未注册硅谷外卖帐号的手机号，登录时将自动注册，且代表已同意
          <a href="javascript:;" class="hint">《用户服务协议》</a>
        </section>
      </van-tab>
      <van-tab title="密码登录">
        <van-form @submit="login">
          <van-field
            v-model="name"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="pwd"
            v-if="inChange"
            :type="passwordType"
            name="密码"
            label="密码"
            placeholder="密码"
            ref="pwdRef"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" color="rgba(18,162,125,0.48)">登录</van-button>
          </div>
          <section class="login_message">
                <input type="text" maxlength="11" placeholder="验证码" v-model="captcha">
                <img class="get_verification" src="http://localhost:4000/captcha" alt="captcha"
                  @click="getCaptcha" ref="captcha">
          </section>
          <!-- 密码明文显示按钮 -->
          <van-switch v-model="checked"
          @change="onChange"
          />
      </van-form>
      </van-tab>
    </van-tabs>
    <a href="#">关于我们</a>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
import { sendCode, smsLogin, getPwdLogin } from '@/api/login'
Vue.use(Toast)
export default {
  name: 'Login',
  data () {
    return {
      name: '',
      pwd: '',
      inChange: true,
      checked: true,
      active: 0,
      pwdRef: '',
      passwordType: 'password',
      phone: '',
      code: '',
      captcha: ''
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    },
    getStyle (data) {
      return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
    },
    onClick () {
      this.onChange()
      this.passwordType = this.inChange ? 'password' : 'text'
    },
    // 密码明文显示
    onChange (inChange) {
      this.passwordType = inChange ? 'password' : 'text'
    },
    // 异步登录
    async login () {
      // 密码登录
      const { name, pwd, captcha } = this
      if (!name) {
        // 用户名必须指定
        Toast.fail('用户名必须指定')
        return
      } else if (!pwd) {
        // 密码必须指定
        Toast.fail('密码必须指定')
        return
      } else if (!captcha) {
        // 验证码必须指定
        this.getCaptcha()
        Toast.fail('请输入验证码')
        return
      }
      // 发送ajax请求密码登陆
      const result = await getPwdLogin({ name, pwd, captcha })
      if (result.code === 0) {
        const user = result.data
        // 将user保存到vuex的state
        this.$store.dispatch('recordUser', user)
        // 去个人中心界面
        this.$router.replace('/mine')
      } else {
        // 显示新的图片验证码
        this.getCaptcha()
        // 显示警告提示
        const msg = result.msg
        Toast.fail(msg)
      }
    },
    getCaptcha () {
      // 每次指定的src要不一样
      this.$refs.captcha.src = 'http://localhost:4000/captcha?time=' + Date.now()
    },
    async getCode () {
      const result = await sendCode(this.phone)
      if (result.code === 1) {
        Toast.fail(result.msg)
      }
    },
    async sub () {
      const res = await smsLogin(this.phone, this.code)
      if (this.code === '') {
        Toast.fail('验证码错误')
        return
      }
      if (res.code === 0) {
        const user = res.data
        localStorage.setItem('userInfo', JSON.stringify(user))
        this.$router.push('/mine')
      } else {
        Toast.fail(res.msg)
      }
    }
  },
  props: {
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '40px'
    },
    length: {
      type: Number,
      default: 4
    }
  }
}
</script>

<style lang="less" scoped>
.login{
  margin: 60px auto;
  a {
    color: #ccc;
    display: block;
    font-size: 12px;
    margin: 0 auto;
    width: 50px;
    margin-top: 60px;
  }
  .login_hint {
    font-size: 14px;
    color: #ccc;
    .hint {
      width: 150px;
      display: inline-block;
      margin: 0;
      font-size: 14px;
      color: #87e7c9;
    }
  }
}
.title-top{
  font-size: 40px;
  color: rgba(18,162,125,0.48);
  font-weight: bold;
  display: block;
  width: 200px;
  margin: 0 auto;
  text-align: center;
}
/deep/.van-form {
  margin-top: 20px;
  position: relative;
}
/deep/.van-switch {
  font-size: 16px;
  position: absolute;
  right: 30px;
  top: 58px;
}
/deep/.van-tab__text {
  font-weight: 700;
}
/deep/.btn-code {
  margin-bottom: 10px;
}
/deep/.van-tabs {
  margin-top: 30px;
}
/deep/.van-tabs__line {
  background: #02a774;
}
.ValidCode{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 90px;
    span{
      display: inline-block;
    }
}
section {
  position: relative;
  margin-top: 20px;
  input{
    width: 30%;
    height: 40px;
    padding-left: 10px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: 0;
    left: 50px;
    position: absolute;
  }
  img {
    position: absolute;
    right: 50px;
    height: 40px;
  }
}
</style>
